<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px" style="padding-top:20px">
        <!--  <el-form-item label="平台编码：">
            <el-select clearable placeholder="选择平台" v-model="searchFilters.name">
              <el-option v-for="(item,index) in platformList" :key="index" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>-->

         <!-- <el-form-item label="平台名称：" prop="platformName">
            <el-input v-model="searchFilters.platformName"  auto-complete="off"></el-input>
          </el-form-item>-->
           <el-form-item label="结算间隔周期">
      <el-select v-model="searchFilters.intervalType" clearable placeholder="选择类型">
        <el-option label="年" value="年"></el-option>
        <el-option label="月" value="月"></el-option>
        <el-option label="日" value="日"></el-option>
        <el-option label="季度" value="季度"></el-option>
      </el-select>
    </el-form-item>
          <el-dialog title="审核核实" width="30%" :visible.sync="reviewFormVisible" :close-on-click-modal="false">
            <el-form :model="searchFilters" label-width="100px"  ref="rules">
              <el-row class="searchDialog-input">
                <el-form-item label="审核状态：" prop="sts">
                  <el-select v-model="searchFilters.sts" style="width:100%">
                    <el-option label="审核通过" value="1">审核通过</el-option>
                    <el-option label="审核拒绝" value="2">审核拒绝</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="审批原因：" prop="auditReason" width="100%">
                  <el-input v-model="searchFilters.auditReason" type="textarea" auto-complete="off"></el-input>
                </el-form-item>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center">
              <el-button @click.native="reviewFormVisible = false">{{$t('action.cancel')}}</el-button>
              <el-button type="primary" @click.native="reviewSuccess">{{$t('action.submit')}}</el-button>
            </div>
          </el-dialog>

          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <div class="left-area">
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                <!-- <el-button type="primary" size="small" @click="freezeApplicationForm()">冻结申请</el-button>
    <el-button type="primary" size="small" @click="thawApplicationForm()">解冻申请</el-button>-->
                               <!-- <el-button type="primary" size="small" @click="auditForm()">预审核</el-button>-->
                <el-button type="primary" size="small" @click="preAuditForm()"
                           v-show="this.folg">审核</el-button>
              </el-button-group>
            </div>
          </div>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
          </el-tabs>

          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table :height="350"
                       :operationWidth=300
                       :tableList="tableList"
                       :tableHeaderList="tableHeaderList"
                       :totalSize="totalSize"
                       :showDetailOperation=true
                       :showEditOperation=true
                       :showBatchDelete=false
                       :showSelection=true
                       :showIndex=false
                       :startUsing=true
                       :blockUp=true
                       :showDeleteOperation=true
                       @findPage="findPage"
                       @handleDetail="handleDetail"
                       @handleDelete="handleDelete"
                       @handleEdit="handleEdit"
                       @handleSizeChange="handleSizeChange"
                       @handlePageChange="handlePageChange"
                       @selectionChange="selectionChange"
                       @handleStartorDisable="handleStartorDisable"
                       @handleProhibitStatus="handleProhibitStatus"
                       ref="jicTable">

            </jic-table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  //一.导包区
   import jicTable from "@/components/jicComponentGallery/jicTable3";

  //二.数据输出区
  export default {
    //===== 注册组件 =====
    components: {
      jicTable
    },

    //===== 数据初始化区=====
    data() {
      return {
        //===== 公共数据初始化 =====
        pageIndex: 0, //当前页数：首页；
        pageSize: 10, //每页记录数：10条记录；
        totalSize: 0, //总记录数：返回数据总条数
        reviewFormVisible: false,
        dialogVisible: false,
        selectionChangeList: [],
        checkedList: [],
        activeName: 'first', //默认查询
        selsts: null,
        platformList:[],//
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        }, // 请求数据的参数
        tableList: [], // 表格列表数据
        searchSize: "mini",
        folg:null,
        //=====表格表头数据=====
        tableHeaderList: [{
          prop: "id",
          label: "主键",
          minWidth: 100,
          formatter: null
        },
         /* {
            prop: "platformName",
            label: "平台名称",
            minWidth: 100,
            formatter: null
          },*/
          {
            prop: "startTime",
            label: "开始时间",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "intervalType",
            label: "结算间隔类型",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "intervalValue",
            label: "结算周期",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "lastSettTime",
            label: "上次结算时间",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "sts",
            label: "状态",
            minWidth: 100,
            formatter: function (row, column, sts, index) {
              if (sts === 0) {
                return "待审核";
              } else if (sts === 1) {
                return "审核通过";
              } else if (sts === 2) {
                return "审核拒绝";
              }
            }
          } ,
          {
            prop: "enableDisable",
            label: "是否启用",
            minWidth: 100,
            formatter: function (row, column, disable, index) {
               if (disable === 1) {
                return "启用";
              } else if (disable === 2) {
                return "停用";
              }
            }
          }
        ],

        //=====搜索表单对应的数据对象初始化=====
        searchFilters: {
          id: null,
          deptId: null,
          platformId: null,
          startTime: null,
          intervalType: null,
          intervalValue: null,
          lastSettTime: null,
          sts: null,
          createTime: null,
          updateTime: null,
          creator: null,
          updater: null,
          deleteFlag: null,
          applierId: null,
          applierReason: null,
          auditorId: null,
          auditReason: null,
          name:null,
          enableDisable:null
        },
       /* Filters:{
          sts:"1",
          applierReason: null,

        },
        rules: {
          applierReason: [{required: false, message: "请输入申请原因", trigger: "blur"}],

        },*/

        //dialogVisible: false, //// 是否显示弹窗内容;
        //editDialogVisible1: false,//// 是否可编辑弹窗内容;
        //editLoading: false,////是否显示加载时动画效果;
      };
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
      this.findPage();
      this.getPlatform();
    },

    //=====Vue.js 方法区=====
    methods: {

      /*tabs函数 */
      handleClick(tab, event) {
        console.log(tab, event);
        this.findPage();
      },
      // 显示审核弹窗
      preAuditForm: function () {
        let this_=this;
        if (this.selectionChangeList.length < 1) {
          this.$message({
            message: "必须选中一条数据",
            type: "warning"
          });
          return false;
        }
        console.log(this.selectionChangeList);
        this.reviewFormVisible = true;
        this_.searchFilters = {
          sts: '',
          auditReason: '',
        };
        if (this_.$refs["searchFilters"]) {
          this_.$refs["searchFilters"].clearValidate();
        }
        //this.resetForm("reviewForm");
      },
      //审核提交
      reviewSuccess: function () {
        this.$refs.searchFilters.validate(valid => {
          // debugger
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let this_ = this;
              let params = {};
              //debugger
              params = Object.assign(params, this.searchFilters)
              for (let i = 0; i <this.selectionChangeList.length; i++) {
                params.id = this.selectionChangeList[i].id;
                this.utils.request.auditSupplierSubmit(params, function (res) {
                  if (res.code == "0000") {
                    this_.searchFilters = {};
                    this_.findPage(null);
                    this_.reviewFormVisible = false;
                    this_.$message({
                      message: "操作成功",
                      type: "success"
                    });
                  } else {
                    this_.$message({
                      message: "操作失败, " + res.msg,
                      type: "error"
                    });
                  }
                });
              }



            });
          }
        });
      },
      //1.查询按钮：查询列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;

        if (this_.searchFilters === undefined || this_.searchFilters === null) {
          this_.searchFilters = {};
        }

        this_.searchFilters.pageNum =
          pageNum === null || pageNum === undefined ?
            this.pageRequest.pageNum :
            pageNum;
        this_.searchFilters.pageSize = this.pageRequest.pageSize;
        if (this_.activeName == 'second') {
          this_.selsts = 1;
          this.folg=true;
          this.utils.request.auditSupplierSpecification(this_.searchFilters, function (
            res
          ) {
            if (res.code === "0000") {
              this_.tableList = res.data.list;
              this_.totalSize = Number(res.data.total);
            } else {
              this_.tableList = [];
              this_.totalSize = 0;
            }
          });
        } else {
          this_.selsts = 0;
          this_.folg = false;

          this.utils.request.findSettSupplierRulePage(this_.searchFilters, function (
            res
          ) {
            if (res.code === "0000") {
              this_.tableList = res.data.list;
              this_.totalSize = Number(res.data.total);
            } else {
              this_.tableList = [];
              this_.totalSize = 0;
            }
          });
        }

      },
      //预审核
      auditForm(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters === undefined || this_.searchFilters === null) {
          this_.searchFilters = {};
        }

        this_.searchFilters.pageNum =
          pageNum === null || pageNum === undefined ?
            this.pageRequest.pageNum :
            pageNum;
        this_.searchFilters.pageSize = this.pageRequest.pageSize;
        this.utils.request.auditSupplierSpecification(this_.searchFilters, function (
          res
        ) {
          if (res.code === "0000") {
            this_.tableList = res.data.list;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.tableList = [];
            this_.totalSize = 0;
          }
        });

      },

      // 2.重置按钮：无条件查询搜索框条件
      resetForm(formName) {
        this.searchFilters = {};
        this.findPage(null);
      },
      getPlatform() {
        let this_ = this;
        this.utils.request.getPlatformName({}, function (res) {
          this_.platformList= res.data
        });
      },

      // 3.详情按钮对应的方法
      handleDetail(params) {
        this.$router.push({
          path: "/SettSupplierRuleDetail/",
          query: {
            id: params.row.id,
            disabled: true,
            bool: true,
            selsts: this.selsts,
            activeName: this.activeName,

          }
        });
      },

      selectionChange(params) {

        this.selectionChangeList = params.selections;

      },
      // 4.编辑按钮对应的方法
      handleEdit(params) {
        this.$router.push({
          path: "/SettSupplierRuleDetail/",
          query: {
            id: params.row.id,
            disabled: false,
            selsts: this.selsts,
            activeName: this.activeName,
          }
        });
      },
      /**
       * 启用
       * @param params
       */
      handleStartorDisable(params) {
        let this_=this;
        if(params.row.enableDisable=="1"){
          this.$message({
            message: "已经是启用状态了",
            type: "warning"
          });
         return false;
        }
        this_.searchFilters=params.row;
        this.utils.request.getEnableDisable(this_.searchFilters, function (res) {
          if (res.code == "0000") {
            this_.searchFilters = {};
            this_.findPage(null);
            this_.reviewFormVisible = false;
            this.$message({
              message: "操作成功",
              type: "success"
            });
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }


        });

      },
      /**
       * 停用
       * @param params
       */
      handleProhibitStatus(params) {
        let this_=this;
        if(params.row.enableDisable=="2"){
          this.$message({
            message: "已经是停用状态了",
            type: "warning"
          });
          return false;
        }
        this_.searchFilters=params.row;
        this.utils.request.getISDisable(this_.searchFilters, function (res) {
          if (res.code == "0000") {
            this_.searchFilters = {};
            this_.findPage(null);
            this_.reviewFormVisible = false;
            this.$message({
              message: "操作成功",
              type: "success"
            });
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }


        });
      },
      // 5.跳转到新增记录页面；
      addForm(params) {
        params = {
          row: {
            id: null
          }
        };
        this.$router.push({
          path: "/SettSupplierRuleDetail/",
          query: {
            id: params.row.id,
            disabled: false,
            selsts: 2
          }
        });
      },
      // 6.每页记录数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
      },

      // 7.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
      // 8.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

      // 9.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

      // 10.删除按钮：删除选中的记录
      handleDelete(data) {
        this.utils.request.deleteSettSupplierRule({
            id: data.row.id
          },
          res => {
            if (res.data) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.findPage();
            } else {
              this.$message({
                message: "删除失败",
                type: "warning"
              });
            }
          }
        );
      }
      //==========Vue.js自定义方法区==========
    }
  };
</script>

<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
